<template>
  <div id="forget-psd-dialog">
    <el-dialog v-model="forgetPsdShow" title="修改密码" width="55rem">
      <div class="step-box">
        <el-steps :active="forgetStep" align-center finish-status="success">
          <el-step title="验证邮箱"></el-step>
          <el-step title="修改密码"></el-step>
          <el-step title="完成修改"></el-step>
        </el-steps>
      </div>
      <div class="change-email-content" style="padding: 2rem 0;height: 27rem">
        <div class="check-email-box" v-if="emailCheckPass === '0'">
          <div class="forget-input-item">
            <div class="input">
              <el-input v-model="forgetInput.email" clearable @blur="checkEmailFormatForget"
                        @input="forgetEmailMsgShow=false;forgetEmailBtnShow = false;"
                        type="text" placeholder="邮箱" :disabled="isDisabledEmailInput"/>
            </div>
            <div class="forget-email-msg-box">
              <div :class="forgetEmailMsgState+'-msg'">
                    <span v-show="forgetEmailMsgShow">
                    {{ forgetEmailMsg }}
                    </span>
              </div>
              <div class="email-button" v-show="forgetEmailBtnShow">
                <el-button type="primary" @click="sendEmailCode" :disabled="isDisabledEmailInput"
                           :loading="sendEmailLoading">
                  {{ emailTime }} 发送验证码
                </el-button>
              </div>
            </div>
          </div>
          <div class="forget-input-item">
            <div class="input">
              <el-input v-model="forgetInput.emailCode" type="text" :disabled="isDisabledEmailInput"
                        @blur="forgetCheckBtnShow = true;"
                        placeholder="邮箱验证码" clearable/>
            </div>
          </div>
          <div class="check-email-btn-box">
            <el-button type="info" @click="cancel">取 消</el-button>
            <el-button type="success" v-if="emailCheckPassAlready&&emailCheckPass==='0'" @click="moveToChangePsd">
              修改密码
            </el-button>
            <el-button type="primary" @click="forgetPsdCheckEmail" v-show="forgetCheckBtnShow"
                       :loading="forgetCheckBtnLoading">验 证
            </el-button>
          </div>
        </div>
        <div class="change-password-box" v-else-if="emailCheckPass === '1'">
          <div class="forget-input-item" style="justify-content: space-between;">
            <div class="input">
              <el-input v-model="forgetInput.newPassword" clearable
                        @input="checkPassword" show-password
                        type="password" placeholder="请输入新密码"/>
            </div>
            <div>
              <password-power :power="forgetPsdPower"/>
            </div>
          </div>
          <div class="forget-input-item">
            <div class="input">
              <el-input v-model="forgetInput.reNewPassword" clearable
                        @input="checkRePassword" show-password
                        type="password" placeholder="请再次输入密码"/>
            </div>
            <div class="error-msg" v-show="forgetRePasswordMsgShow">
              {{ forgetRePasswordMsg }}
            </div>
          </div>
          <div class="change-password-btn-box">
            <el-button type="info" @click="cancel">取 消</el-button>
            <el-button type="success" @click="moveToCheckEmail">验证邮箱</el-button>
            <el-button type="primary" @click="changePassword" :loading="forgetChangePsdLoading">修 改</el-button>
          </div>
        </div>
        <div class="change-password-success" v-else>
          密码修改成功，请 <span class="success-to-login" @click="cancel">登录</span>
        </div>
      </div>
    </el-dialog>
  </div>
  <div class="forget-dialog-code">
    <captcha-code-dialog :show="captchaCodeShow" @captchaCodeCheckState="getCheckState"/>
  </div>
</template>

<script>
import {changePassword, forgetCheckEmailCode, isCaptchaCode, sendEmailCode} from "@/api/userApi.js";
import {successCode} from "@/api/base/http.js";
import * as myMessage from "@/utils/myMessage.js";
import {hex_md5} from "@/utils/md5.js";
import {isEmail} from "@/utils/utils.js";
import CaptchaCodeDialog from "@/components/user/captchaCodeDialog.vue";
import PasswordPower from "@/components/user/passwordPower.vue";
import passwordPower from "@/components/user/passwordPower.vue";
import {constantStore} from "@/stores/constantStore.js";

export default {
  computed: {
    passwordPower() {
      return passwordPower
    }
  },
  components: {PasswordPower, CaptchaCodeDialog},
  props: {
    show: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      //第二栏的密码验证提示文字
      forgetChangePsdLoading: false,
      forgetRePasswordMsg: "两次输入密码不一样，请检查",
      forgetRePasswordMsgShow: false,
      forgetPsdPower: -1,
      captchaCodeShow: 0,
      captchaCodeState: false,//图灵验证码的验证状态
      forgetPsdShow: false,
      forgetStep: 0,
      emailCheckPass: "0",//修改密码阶段   0 1 2
      isDisabledEmailInput: false,//是否禁用邮箱验证阶段的输入框
      emailCheckPassAlready: false,//邮箱的验证状态，是否验证邮箱
      forgetEmailMsg: "请点击右侧按钮获取验证码",
      forgetEmailMsgState: "success",
      forgetEmailMsgShow: false,
      forgetEmailBtnShow: false,
      forgetCheckBtnLoading: false,
      sendEmailLoading: false,
      forgetCheckBtnShow: true,//验证按钮是否显示
      emailTime: "",
      forgetInput: {
        newPassword: "",
        reNewPassword: "",
        email: "",
        emailCode: ""
      },
    }
  },
  watch: {
    "show": {
      handler(newVal) {
        this.forgetPsdShow = true;
      }
    }
  },
  methods: {
    checkPassword() {
      this.forgetPsdPower = constantStore().checkPasswordStrength(this.forgetInput.newPassword);
    },
    checkRePassword() {
      if (this.forgetInput.newPassword === '' || this.forgetInput.reNewPassword === '') {
        return;
      }
      if (this.forgetInput.reNewPassword === this.forgetInput.newPassword) {
        this.forgetRePasswordMsgShow = false;
      } else {
        this.forgetRePasswordMsgShow = true;
      }

    },
    async cancel() {
      this.forgetPsdShow = false;
      this.$emit("update:modelValue", false)
      await constantStore().sleep(1000);
      this.forgetStep = 0;
      this.forgetCheckBtnShow = true;
      this.forgetCheckBtnLoading = false;
      this.forgetInput.newPassword = "";
      this.forgetInput.reNewPassword = "";
      this.forgetInput.email = "";
      this.forgetInput.emailCode = "";
      this.emailCheckPass = "0";
      this.emailTime = "";
      this.sendEmailLoading = false;
      this.emailMsgShow = false;
      this.forgetChangePsdLoading = false;
      this.forgetEmailMsgShow = false;
      this.forgetEmailBtnShow = false;
      this.forgetEmailMsg = "请点击右侧按钮获取验证码";
      //是否可以提交修改
      this.emailCheckPassAlready = false;
      //第二栏的密码验证提示文字
      this.forgetRePasswordMsg = "";
      this.forgetRePasswordMsgShow = false;
      this.forgetRePasswordMsgState = "success";
    },
    moveToChangePsd() {
      if (this.emailCheckPassAlready) {
        this.emailCheckPass = "1";
      }
    },
    moveToCheckEmail() {
      this.emailCheckPass = "0";
    },
    forgetPsdCheckEmail() {
      this.forgetCheckBtnLoading = true;
      forgetCheckEmailCode(this.forgetInput.email, this.forgetInput.emailCode).then(res => {
        if (res.code === successCode) {
          myMessage.success(res.message);
          this.forgetStep = 1;
          this.emailCheckPassAlready = true;
          this.emailCheckPass = "1";
          this.forgetCheckBtnShow = false;
          this.isDisabledEmailInput = true;
        } else {
          this.emailCheckPassAlready = false;
          this.emailCheckPass = "0";
          myMessage.error(res.message);
        }
        this.forgetCheckBtnLoading = false;
        this.isDisabledEmailInput = false;
      })
    },
    changePassword() {
      if (this.forgetRePasswordMsgShow) {
        myMessage.error(this.forgetRePasswordMsg);
        return;
      }
      let password = hex_md5(this.forgetInput.newPassword);
      this.forgetChangePsdLoading = true;
      changePassword(this.forgetInput.email, this.forgetInput.emailCode, password).then(res => {
        if (res.code === successCode) {
          this.forgetStep = 2;
          myMessage.success("密码修改成功，请重新登录~");
          this.emailCheckPass = "3";
          this.forgetStep = 3;
        } else {
          myMessage.success(res.message);
        }
        this.forgetChangePsdLoading = false;
      })
    },
    checkEmailFormatForget() {
      this.forgetCheckBtnShow = true;
      if (this.forgetInput.email === "") {
        return;
      }
      if (!isEmail(this.forgetInput.email)) {
        this.forgetEmailMsg = "邮箱格式不正确";
        this.forgetEmailMsgState = "warring";
        this.forgetEmailMsgShow = true;
        this.forgetEmailBtnShow = false;
        return;
      }
      this.forgetEmailMsg = "请点击右侧按钮获取验证码";
      this.forgetEmailMsgState = "success";
      this.forgetEmailMsgShow = true;
      this.forgetEmailBtnShow = true;
      this.sendEmailCodeType = "forget";
    },
    getCheckState(val) {
      this.captchaCodeState = val;
    },
    async sendEmailCode() {
      await isCaptchaCode().then(res => {
        if (res.code === successCode) {
          this.captchaCodeState = true;
        } else {
          this.captchaCodeState = false;
          this.captchaCodeShow++;
        }
      })
      if (!this.captchaCodeState) {
        return;
      }
      this.sendEmailLoading = true;
      this.emailMsgShow = false;
      this.emailTime = 30
      let intervalId = setInterval(() => {
        this.emailTime -= 1;
        if (this.emailTime < 0) {
          this.emailTime = "";
          this.sendEmailLoading = false;
          clearTimeout(intervalId);
        }
      }, 1000);// 设置一个每隔 1000 毫秒执行一次的计时器
      sendEmailCode(this.sendEmailCodeType, this.forgetInput.email).then(res => {
        if (res.code === successCode) {
          myMessage.success(res.message);
        } else {
          myMessage.error(res.message);
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
#forget-psd-dialog {
  max-height: 50rem;

  .change-email-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .change-password-box {
      .change-password-btn-box {
        display: flex;
        justify-content: right;
      }
    }

    .forget-input-item {
      display: flex;
      flex-direction: column;
      width: 35rem;
      height: 7.5rem;

      .forget-email-msg-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: .5rem 0;
      }
    }

    .check-email-btn-box {
      display: flex;
      justify-content: right;
    }

    .change-password-success {
      display: flex;

      .success-to-login {
        cursor: pointer;
        padding: 0 .4rem;
      }

      .success-to-login:hover {
        color: #0ff3ff;
      }
    }
  }

  .success-msg,
  .warring-msg,
  .error-msg {
    padding: 0 .8rem;
    height: 2rem;
  }

  .error-msg {
    color: #d23d69;
  }

  .success-msg {
    color: #47d15d;
  }

  .warring-msg {
    color: rgb(230, 162, 60);
  }

}


</style>
